﻿@model List<Kanban.Entity.Quadro>

@{
    ViewBag.Title = "Kanban";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles{
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    </style>
}

@{ Html.RenderPartial("_Menu"); }

<div class="container">


    <div id="mensagem" class="alert alert-success" style="display:none">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <p></p>
    </div>

    <div style="padding-bottom: 10px">
        <a href="#novoQuadro" class="btn btn-success" data-toggle="modal"><i class="icon-plus icon-white"></i> Quadro</a>
        <!--<a href="@Url.Action("Play", "Home")" class="btn btn-default"><i class="icon-play"></i> Modo exibição</a>-->
    </div>    

    @if (Model == null)
    {

        <div class="alert alert-info">
            Nenhum quadro encontrado para o usuário <strong>@User.Identity.Name</strong>.
        </div>
        
    }
    else
    {

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th class="span4">Nome</th>
                <th class="span5">Descrição</th>
                <th class="span2">Criado em</th>
                <th class="span1"></th>
            </tr>
        </thead>
        <tbody>
            @foreach (Kanban.Entity.Quadro quadro in Model)
            {
                <tr data-idQuadro="@quadro.Id">
                    <td class="nome">
                        <a href="@Url.Content("~/Home/Quadro/" + @quadro.Id)">@quadro.Nome</a>                       
                    </td>
                    <td>@quadro.Descricao</td>
                    <td>@quadro.DataCadastro.ToShortDateString()</td>
                    <td>
                         <div class="btn-group pull-right">
                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                Ações
                          <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-idQuadro="@quadro.Id">
                                <li><a href="javascript:void(0)" class="editarQuadro"><i class="icon-pencil"></i> Editar quadro</a></li>
                                <li><a href="javascript:void(0)" class="arquivarQuadro"><i class="icon-folder-close"></i> Arquivar</a></li>
                                <li class="divider"></li>
                                <li><a href="javascript:void(0)" class="excluirQuadro"><i class="icon-warning-sign"></i> Excluir Quadro</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            }
        </tbody>
    </table>

    }

</div>


<div id="novoQuadro" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="novoQuadroLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="novoQuadroLabel">Cadastrar quadro</h3>
  </div>
  <div class="modal-body">
    
      <div class="row-fluid">          

          <!--
          <ul class="nav nav-tabs">
            <li class="active">
            <a href="#novoQuadroBasico" data-toggle="tab">Quadro</a>
            </li>
            <li><a href="#novoQuadroScrum" data-toggle="tab">SCRUM</a></li>
        </ul>

        

          <div class="tab-content">
              

          <div id="novoQuadroBasico" class="tab-pane active">              
              <p></p>
    -->

            <div id="erroNovoQuadro" class="alert alert-error" style="display:none"></div>
            <div id="infoNovoQuadro" class="alert alert-info">Campos com asterisco são obrigatórios.</div>
            
                <label class="span4">Nome*</label>
                <input class="span8" autofocus="autofocus" type="text" id="nomeNovoQuadro" />
    
                <label class="checkbox offset4 span8"><input type="checkbox" id="isPrivadoNovoQuadro" /> Quadro privado</label>

                <label class="span4">Equipe*</label>
                <select id="equipeNovoQuadro">
                    <option value="0">Selecione</option>
                    @if(ViewBag.Equipes != null){                
                        foreach (Kanban.Entity.Equipe equipe in ViewBag.Equipes)
                        {
                            <option value="@equipe.Id">@equipe.Nome</option>
                        }
                    }
                </select>
    
                <label class="span4">Descrição</label>
                <textarea class="span8" id="descricaoNovoQuadro" style="height:60px"></textarea>

                <label class="span4">Colunas*</label>
                <input class="span8" autofocus="autofocus" type="text" id="colunasNovoQuadro" value="To Do, Doing, Done" />

                
            
          <!--
            </div>

          <div id="novoQuadroScrum" class="tab-pane">
              <p></p>
               <label class="span4">Data início</label>
              <input class="span5" type="text" id="dataInicioNovoQuadro" /> DD/MM/AAAA

              <label class="span4">Data fim</label>
              <input class="span5" type="text" id="dataFimNovoQuadro" /> DD/MM/AAAA

              <label class="span4">Estimativa</label>
              <input class="span5" type="text" id="estimativaNovoQuadro" />
          </div>
      -->    
        </div>
      
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button class="btn btn-primary" id="adicionarQuadro">Adicionar</button>
  </div>
</div>



    

@section scripts{
    <script type="text/javascript">

        var url_base = '@Url.Content("~")';

        $(function () {
            
            $('.modal').on('shown', function(){
                $(this).find('[autofocus]:first').focus();
            });

            $('.table').on('click', '.excluirQuadro', function () {
                var idQuadro = $(this).parent().parent().attr('data-idQuadro'); 
                ExcluirQuadro(idQuadro);
            });

            $('.table').on('click', '.editarQuadro', function() {
                var idQuadro = $(this).parent().parent().attr('data-idQuadro'); 
                EditarQuadro(idQuadro);
            });

            $('.table').on('click', '.arquivarQuadro', function() {
                var idQuadro = $(this).parent().parent().attr('data-idQuadro'); 
                ArquivarQuadro(idQuadro);
            });

            $('body').on('click', '#isPrivadoNovoQuadro', function(){            

                if($(this).is(':checked')){
                    $('#equipeNovoQuadro').prop('disabled', true);
                }else{
                    $('#equipeNovoQuadro').prop('disabled', false);
                }
            
            });

            $('body').on('click', '#adicionarQuadro', AdicionarQuadro);          

            function ObterColunas(){
                var colunas = [];
                var c = $('#colunasNovoQuadro').val().split(',');        

                for(i = 0; i < c.length; i++){                    
                    var item = {};
                    item.Nome = $.trim(c[i]); 
                    if(item.Nome != ''){                        
                        item.Ordem = colunas.length + 1;
                        colunas.push(item);
                    }
                }

                return colunas;
            }

            function ValidarColunas(colunas){                

                if(colunas.length < 2){
                    $('#erroNovoQuadro').text('É preciso informar pelo menos duas colunas.');
                    $('#erroNovoQuadro').show();       
                    $('#infoNovoQuadro').hide();
                    $('#colunasNovoQuadro').focus();
                    return false;
                }

                return true;
            }

            function AdicionarQuadro() {        
                
                $('#erroNovoQuadro').hide();
                $('#infoNovoQuadro').show();                                

                var isPrivado = $('#isPrivadoNovoQuadro').is(':checked');

                var nome = $('#nomeNovoQuadro').val(); 
                if(nome == null || nome == ''){
                    $('#erroNovoQuadro').text('O nome não foi informado');
                    $('#erroNovoQuadro').show();
                    $('#infoNovoQuadro').hide();       
                    $('#nomeNovoQuadro').focus();
                    return;
                }

                var equipe = $('#equipeNovoQuadro').val();
                if(equipe == '0' && !isPrivado){
                    $('#erroNovoQuadro').text('É preciso selecionar uma equipe');;
                    $('#erroNovoQuadro').show();       
                    $('#infoNovoQuadro').hide();
                    $('#equipeNovoQuadro').focus();
                    return;
                }

                if(isPrivado)
                    equipe = 0;

                var colunas = ObterColunas();
                if(!ValidarColunas(colunas)){
                    return;
                }

                var descricao = $('#descricaoNovoQuadro').val();
                var dataInicio = $('#dataInicioNovoQuadro').val();                
                var dataFim = $('#dataFimNovoQuadro').val();


                var req = $.ajax({
                    url: url_base + 'api/quadros',
                    type: 'POST',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({ Nome: nome, Descricao: descricao, Colunas: colunas, DataInicio: dataInicio, DataFim: dataFim, CriadoPor: { Id: @ViewBag.Usuario }, Equipe : { Id: equipe } })
                });

                req.done(function (json) {

                    if($('.table tbody').length == 0){
                        location.reload();
                        return;
                    }

                    var html = '<tr data-idQuadro="' + json.Id + '">';
                    html += '       <td class="nome">';
                    html += '           <a href="@Url.Content("~/Home/Quadro/")' + json.Id + '">' + json.Nome + '</a>';                  
                    html += '       </td>';
                    html += '       <td>' + (json.Descricao == null ? '' : json.Descricao) + '</td>';
                    html += '       <td>' + FormatarDataHora(Date.fromISO(json.DataCadastro)) + '</td>';
                    html += '<td><div class="btn-group pull-right">';
                    html += '                        <button class="btn dropdown-toggle" data-toggle="dropdown">';
                    html += '                          Ações';
                    html += '                          <span class="caret"></span>';
                    html += '                        </button>';
                    html += '                        <ul class="dropdown-menu" data-idQuadro="' + json.Id + '">';                    
                    html += '                           <li><a href="javascript:void(0)" class="editarQuadro"><i class="icon-pencil"></i> Editar quadro</a></li>';
                    html += '                           <li><a href="javascript:void(0)" class="arquivarQuadro"><i class="icon-folder-close"></i> Arquivar</a></li>';
                    html += '                           <li class="divider"></li>';
                    html += '                           <li><a href="javascript:void(0)" class="excluirQuadro"><i class="icon-warning-sign"></i> Excluir Quadro</a></li>';
                    html += '                        </ul>';
                    html += '                      </div></td>';
                    html += '</tr>';

                    $('.table tbody').append(html);

                    //$.fancybox.close();
                    $('#novoQuadro').modal('hide');
                    $('#erroNovoQuadro').hide();
                    $('#nomeNovoQuadro').val('');
                    $('#descricaoNovoQuadro').val('');
                    $('#equipeNovoQuadro').val('');
                    $('#dataInicioNovoQuadro').val('');
                    $('#dataFimNovoQuadro').val('');



                    $('#mensagem').find('p').text('Quadro cadastrado com sucesso.');
                    $('#mensagem').show();
                });

                req.fail(function (jqXHR, textStatus, errorThrown) {
                    var resultado = $.parseJSON(jqXHR.responseText);
                    alert(resultado["ExceptionMessage"]);
                });
            }

            function ArquivarQuadro(idQuadro){

                if(confirm('Tem certeza que deseja arquivar esse quadro? Ele deixará de aparecer na tela inicial e não poderá mais ser alterado.')){

                    var req = $.ajax({
                        url: url_base + 'api/quadros/' + idQuadro + '/arquivar',
                        type: 'PUT',
                        dataType: 'json',
                        contentType: "application/json;charset=utf-8"
                    });

                    req.done(function(quadro){
                        $('tr[data-idQuadro='+quadro.Id+']').remove();
                    });

                    req.fail(function (jqXHR, textStatus, errorThrown) {
                        var resultado = $.parseJSON(jqXHR.responseText);
                        alert(resultado["ExceptionMessage"]);
                    });
                }
            }

            function EditarQuadro(idQuadro){
                AindaNaoEstaPronto();
            }

            function ExcluirQuadro(idQuadro){
                if(confirm('Tem certeza que deseja excluir esse quadro?')){

                    var req = $.ajax({
                        url: url_base + 'api/quadros/' + idQuadro,
                        type: 'DELETE',
                        dataType: 'json',
                        contentType: "application/json;charset=utf-8"
                    });

                    req.done(function(quadro){
                        $('tr[data-idQuadro='+quadro.Id+']').remove();

                        
                        if($('.table tbody tr').length == 0){
                            location.reload();
                            return;
                        }

                    });

                    req.fail(function (jqXHR, textStatus, errorThrown) {
                        var resultado = $.parseJSON(jqXHR.responseText);
                        alert(resultado["ExceptionMessage"]);
                    });
                }             
            }

            function FormatarDataHora(d){

                var dd = Right('00' + d.getDate().toString(), 2);
                var MM = Right('00' + d.getMonth().toString(), 2);
                var yyyy = d.getFullYear().toString();
                var hh = Right('00' + d.getHours().toString(), 2);
                var mm = Right('00' + d.getMinutes().toString(), 2);
                var ss = Right('00' + d.getSeconds().toString(), 2);

                return dd + '/' + MM + '/' + yyyy + ' ' + hh + ':' + mm + ':' + ss;
            }

            function Left(str, n){
                if (n <= 0)
                    return "";
                else if (n > String(str).length)
                    return str;
                else
                    return String(str).substring(0,n);
            }

            function Right(str, n){
                if (n <= 0)
                    return "";
                else if (n > String(str).length)
                    return str;
                else {
                    var iLen = String(str).length;
                    return String(str).substring(iLen, iLen - n);
                }
            }

        });

        function AindaNaoEstaPronto(){
            alert('Ops! Desculpe, essa funcionalidade ainda não está pronta. (=');
        }

        (function(){
            var D= new Date('2011-06-02T09:34:29+02:00');
            if(!D || +D!== 1307000069000){
                Date.fromISO= function(s){
                    var day, tz,
                    rx=/^(\d{4}\-\d\d\-\d\d([tT ][\d:\.]*)?)([zZ]|([+\-])(\d\d):(\d\d))?$/,
                    p= rx.exec(s) || [];
                    if(p[1]){
                        day= p[1].split(/\D/);
                        for(var i= 0, L= day.length; i<L; i++){
                            day[i]= parseInt(day[i], 10) || 0;
                        };
                        day[1]-= 1;
                        day= new Date(Date.UTC.apply(Date, day));
                        if(!day.getDate()) return NaN;
                        if(p[5]){
                            tz= (parseInt(p[5], 10)*60);
                            if(p[6]) tz+= parseInt(p[6], 10);
                            if(p[4]== '+') tz*= -1;
                            if(tz) day.setUTCMinutes(day.getUTCMinutes()+ tz);
                        }
                        return day;
                    }
                    return NaN;
                }
            }
            else{
                Date.fromISO= function(s){
                    return new Date(s);
                }
            }
        })()
    </script>
}